<template>
  <div>
    <ul class="ul1" >
      <li v-for="(list,index) in list">
        <p>{{index+1}}</p>
        <img :src="list.img" alt="">
        <p>{{list.name}}</p>
        <div class="vipName">{{list.vip}}</div>
        <p>￥{{list.Money}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  export default {
    name: "Ranking",
    data() {
      return {
        list: [
          {
            img: require("../assets/z1.png"),
            name: "Chixingbo",
            Money: "2678891",
            vip:"钻石会员"
          },
          {
            img: require("../assets/z1.png"),
            name: "张三11111111111111",
            Money: "2678892",
            vip:"白银会员"
          },
          {
            img: require("../assets/z1.png"),
            name: "李四",
            Money: "2678893",
            vip:"黄金会员"
          },
          {
            img: require("../assets/z1.png"),
            name: "张三李四",
            Money: "2678894",
            vip:"普通会员"
          },
          {
            img: require("../assets/z1.png"),
            name: "张三李四",
            Money: "2678895",
            vip:"普通会员"
          },
          {
            img: require("../assets/z1.png"),
            name: "张三李四",
            Money: "2678896",
            vip:"普通会员"
          },{
            img: require("../assets/z1.png"),
            name: "张三李四",
            Money: "2678897",
            vip:"普通会员"
          }]
      }
    },
    created(){
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
    }
   /* beforeCreate:function() { // 生命周期
      {
        const  jsonValue = JSON.stringify({
          "c":"10045",
          "p":{
            "userId":JSON.parse(window.localStorage.data).id,
            "tokenId":token(),
            "startIndex":0,
            "pageSize":5
          }
        });
        this.$http.post('http://192.168.20.109:8080/earnlot/qqs.us', jsonValue).then((res) => {
          this.list = res.data.p;
          console.log(this.list);
        })

      }
    },*/
  }
</script>

<style scoped lang="scss">
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ul1 {
    width:100%;
    li {
      width: 100%;
      height: 180px;
      border-bottom: 1px solid #f5f5f5;
      display: flex;
      position: relative;
      p:nth-of-type(1)
      {
        margin-top: 80px;
        margin-left: 30px;
        font-size: 32px;
        color: #433c3c;
      }
      img{
        width: 104px;
        height: 104px;
        border-radius: 50%;
        margin-left:38px;
        margin-top: 41px;
      }
      p:nth-of-type(2)
      {
        font-size:28px;
        color: #fe3519;
        margin-top: 56px;
        margin-left: 18px;
        width:25%;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      p:nth-of-type(3)
      {
        font-size: 32px;
        color: #3b3b43;
        position: absolute;
        right: 30px;
        margin-top: 76px;
      }
    }
    .vipName{
      width:108px;
      height: 36px;
      border-radius:50px;
      background:#fe3519;
      position: absolute;
      left:204px;
      top:101px;
      text-align: center;
      font-size: 20px;
      color: #ffffff;
    }
    li:nth-of-type(1)>{

    }
    li:nth-of-type(2){
      background: cyan;
    }
    li:nth-of-type(3){

    }
  }
</style>
